<template>
  <div class="CommentsInfoList">
    <search-block>
      <template slot="button">
        <el-button type="primary" @click="search(true)">查询</el-button>
      </template>
      <el-form inline :model="model" label-width="100px">
        <el-form-item label="评论人:">
          <el-input v-model="model.createUserName" clearable></el-input>
        </el-form-item>
        <el-form-item label="内容:">
          <el-input v-model="model.comments" clearable></el-input>
        </el-form-item>
        <el-form-item label="评价:">
          <y-code-select
            v-model="model.type"
            clearable
            dict="COMMENT_TYPE"></y-code-select>
        </el-form-item>
        <el-form-item label="精选评论:">
          <el-select v-model="model.selected" clearable>
            <el-option label="精选" :value="0"></el-option>
            <el-option label="非精选" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核通过:">
          <el-select v-model="model.status" clearable>
            <el-option label="通过" :value="0"></el-option>
            <el-option label="不通过" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </search-block>
    <y-table
      ref="table"
      border
      pagination
      :getDataWay="getDataWay"
      :columns="columns">
      <el-table-column slot="status" label="精选评论" align="center" header-align="center" width="80">
        <template v-slot="{row}">
          <el-popconfirm
            :title="row.status === '0' ? '是否取消精选？' : '是否确认精选？'"
            @confirm="() => {
            updateSelected(row)
          }">
            <el-switch
              disabled
              slot="reference"
              v-model="row.selected"
              active-value="0"
              inactive-value="1"></el-switch>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column slot="status" label="审核通过" align="center" header-align="center" width="80" v-if="openSwitch">
        <template v-slot="{row}">
          <el-popconfirm
            :title="row.status === '0' ? '是否确认审核不通过？' : '是否确认审核通过？'"
            @confirm="() => {
            updateStatus(row)
          }">
            <el-switch
              disabled
              slot="reference"
              v-model="row.status"
              active-value="0"
              inactive-value="1"></el-switch>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="80">
        <template v-slot="{row}">
          <div class="table-buttons">
            <el-popconfirm
              title="是否确认删除该评论？"
              @confirm="delComment(row)">
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </y-table>
  </div>
</template>

<script>
export default {
  name: "CommentsInfoList",
  inject: ['getDictNameSync'],
  props:{
    bizId: String,
    commentBusinessType: String
  },
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.common.commentsInfoPage,
        param: Object.assign({
          businessId: this.bizId
        }, this.model)
      }
    }
  },
  created(){
    this.$yAxios({
      url: this.$api.common.queryCommentsInfoSwitch,
      data:{
        commentBusinessType: this.commentBusinessType
      }
    }, info => {
      this.openSwitch = info;
    })
  },
  data(){
    return {
      openSwitch: false,
      model: {
        comments: '',
        createUserName: '',
        type: '',
        selected: '',
        status: ''
      },
      columns: [
        {
          label: '评论人',
          prop: 'createUserName',
          width: 100
        },
        {
          label: '评论内容',
          prop: 'comments',
          minWidth: 100
        },
        /*{
          label: '评价',
          prop: 'type',
          width: 80,
          formatter: (function(row){
            return this.getDictNameSync(row.type, 'COMMENT_TYPE');
          }).bind(this)
        },*/
        {
          label: '评论时间',
          prop: 'createTime',
          width: 160,
          formatter(row){
            return (row.createTime || '').replace('T', ' ');
          }
        },
        {
          label: '审核通过',
          prop: 'status',
          template: true
        },
        {
          label: '精选评论',
          prop: 'selected',
          template: true
        }
      ],
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(Object.assign({
        businessId: this.bizId
      }, this.model), jumpToFirst);
    },
    delComment(row){
      this.$yAxios({
        url: this.$api.common.removeCommentsInfo,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    updateStatus(row){
      this.$yAxios({
        url: this.$api.common.commentsInfoStatus,
        data:{
          id: row.id,
          status: row.status ^ 1
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '修改审核状态成功'
        });
        this.search();
      });
    },
    updateSelected(row){
      this.$yAxios({
        url: this.$api.common.commentsInfoSelected,
        data:{
          id: row.id,
          selected: row.selected ^ 1
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '修改精选成功'
        });
        this.search();
      });
    }
  }
}
</script>

<style scoped lang="less">
.CommentsInfoList{
  .SearchBlock {
    /deep/ .el-form-item{
      width: calc(33.3333333333% - 10px);
      .el-form-item__content{
        margin-bottom: 10px;
        .el-input__inner{
          min-width: 220px;
        }
      }
    }
    /deep/.search-buttons{
      align-self: flex-start;
    }
  }
}
</style>
